<div id="wrapperRef" class="home-wrapper" [ngClass]="{ custom: customizing }">
  <div class="widgets-content">
    <div class="widgets-top">
      <div class="widgets-top-title"></div>
      <div class="widgets-top-actions">
        <button *ngIf="customizing" type="button" class="btn btn-primary" (click)="save()">完成</button>
        <button *ngIf="!customizing" type="button" class="btn btn-primary" (click)="custom()">自定义</button>
      </div>
    </div>
    <div id="widgetsRef" class="widgets">
      <div class="widgets-wrapper">
        <div *ngIf="isCompsEmpty" class="empty-widgets">
          <span class="empty-txt">没有可展示的组件，请先自定义添加组件</span>
        </div>
        <div *ngIf="grid && grid.layout" class="l-row" style="margin-left: -7px; margin-right: -7px">
          <div
            *ngFor="let item of grid.layout; let i = index"
            class="l-col l-col-24 is-guttered"
            [ngClass]="'l-col-md-' + item"
            style="padding-left: 7px; padding-right: 7px"
          >
            <div [id]="'draggable-' + i" class="draggable-box" [ngClass]="{ active: currentActiveIndex === i }">
              <div *ngIf="customizing" class="add-view">
                <div class="l-button add" (click)="activeView(i)">添加</div>
              </div>
              <div *ngFor="let component of grid.componentList[i]" class="widgets-item">
                <widget-container [componentName]="component" [componentsConfig]="componentsConfig"></widget-container>
                <div *ngIf="customizing" class="customize-overlay">
                  <div class="l-button btn-close" (click)="remove(component)">X</div>
                  <label>{{ allWidget[component].title }}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="customizing" class="widgets-aside">
    <div class="widgets-aside-header">
      <div class="widgets-aside-title">添加部件</div>
      <div class="widgets-aside-close" (click)="close()">关闭</div>
    </div>
    <div class="widgets-aside-header" style="height: auto">
      <div class="select-layout">
        <!-- <div
          class="select-layout-item item1"
          [ngClass]="{ active: grid.layout.join(',') === '12,6,6' }"
          (click)="setLayout([12, 6, 6])"
        >
          <div class="l-row" style="margin-left: -1px; margin-right: -1px">
            <div class="l-col l-col-12 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
          </div>
        </div>

        <div
          class="select-layout-item item2"
          [ngClass]="{ active: grid.layout.join(',') === '24,16,8' }"
          (click)="setLayout([24, 16, 8])"
        >
          <div class="l-row" style="margin-left: -1px; margin-right: -1px">
            <div class="l-col l-col-24 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-16 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-8 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
          </div>
        </div> -->

        <div
          class="select-layout-item item3"
          [ngClass]="{ active: grid.layout.join(',') === '6,6,6,6,16,8,24' }"
          (click)="setLayout([6, 6, 6, 6, 16, 8, 24])"
        >
          <div class="l-row" style="margin-left: -1px; margin-right: -1px">
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-16 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-8 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-24 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
          </div>
        </div>

        <div
          class="select-layout-item item4"
          [ngClass]="{ active: grid.layout.join(',') === '24,16,8,6,6,6,6' }"
          (click)="setLayout([24,16,8,6,6,6,6])"
        >
          <div class="l-row" style="margin-left: -1px; margin-right: -1px">
            <div class="l-col l-col-24 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-16 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-8 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
            <div class="l-col l-col-6 is-guttered" style="padding-left: 1px; padding-right: 1px"><span></span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="widgets-list">
      <div class="empty" *ngIf="myWidgetList.length <= 0">暂时没有可用组件</div>
      <div *ngFor="let item of myWidgetList" class="widgets-list-item">
        <div class="item-info">
          <h2>{{ item.title }}</h2>
          <p>{{ item.description }}</p>
        </div>
        <div class="item-actions">
          <div class="l-button add" [ngClass]="{ disabled: currentActiveIndex === -1 }" (click)="push(item)">
            <img src="assets/img/widget/add.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="widgets-aside-footer">
      <button type="button" class="btn btn-primary" (click)="backDefault()">恢复默认</button>
    </div> -->
  </div>
</div>
